<template>
	<u-popup :show="isShow" mode="center" round="14px" bgColor="transparent"
		:safeAreaInsetBottom="false" @close="close">
		<view class="play-container" :style="{'background-image': 'url('+FreePlaySeries.back+')'}">
			<image :src="FreePlaySeries.img" class="free-img"></image>
			<view class="free-title column-center-flex" :style="{'background-image': 'url('+FreePlaySeries.title+')'}">
				<view>试玩</view>
				<view>HASHMART</view>
			</view>

			<view class="top-area">硬核潮品</view>
			<view class="middle-area">
				<view class="list-content">
					<view v-for="(item, index) in optionsList" :key="index" class="option-class main-center-flex"
						:style="{'background-image': 'url('+FreePlaySeries.options+')'}"
						@click="selectOption(item.value)">
						<view class="option-text">{{ item.label }}</view>
					</view>
				</view>
			</view>
			<view class="bottom-area main-center-flex">试玩结果仅供参考</view>
		</view>
	</u-popup>
</template>

<script>
	import {FreePlaySeries} from '../../utils/objectValue';

	export default {
		props: {
			firstBlindId: {
				type: String | Number,
				default: 0
			}
		},
		data() {
			return {
				FreePlaySeries,
				isShow: false,
				optionsList: [
					{
						label: '一发入魂',
						value: 1
					},
					{
						label: '欧气三连',
						value: 3
					},
					{
						label: '霸气五连',
						value: 5
					},
					{
						label: '豪气十连',
						value: 10
					}
				]
			};
		},
		computed: {},
		// watch: {
		// 	popupShow(newVal) {
		// 		this.isShow = newVal;
		// 	}
		// },
		methods: {
			open() {
				this.isShow = true;
			},
			close() {
				this.isShow = false;
			},
			selectOption(num) {
				uni.navigateTo({
					url: `/plugins/result-box/index?id=${this.firstBlindId}&num=${num}&isPlay=${true}`
				});
				this.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
.play-container{
	position: relative;
	width: 628rpx;
	height: 640rpx;
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	.free-img{
		position: absolute;
		width: 318rpx;
		height: 320rpx;
		right: 0;
		top: -100rpx;
	}
	.free-title{
		position: absolute;
		right: -20rpx;
		top: 103rpx;
		width: 116rpx;
		height: 116rpx;
		background-size: 100% 100%;
		transform: rotate(25deg);
		view{
			color: #303030;
		}
		view:first-child{
			font-family: BTH;
			font-size: 20px;
			font-weight: 600;
		}
		view:last-child{
			font-size: 6px;
		}
	}
	.top-area{
		width: 100%;
		height: 40%;
		font-size: 35px;
		font-family: BTH;
		font-weight: 400;
		color: #2E313F;
		display: flex;
		align-items: center;
		padding-left: 50rpx;
	}
	.middle-area{
		width: 100%;
		height: 50%;
	}
	.list-content{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: center;
	}
	.option-class{
		width: 252rpx;
		height: 98rpx;
		background-size: 100% 100%;
		margin-bottom: 20rpx;
	}
	.option-text{
		font-size: 14px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.bottom-area{
		width: 100%;
		height: 10%;
		font-size: 10px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #7E7E7E;
	}
}
</style>